

const Setup = { 
    template: `<div>
    
<mt-header :title="'第'+area+'区信息配置'" v-model="area"></mt-header>
       <h2></h2>
      <ul>  
         <mt-field label="纵向长度"  placeholder="密集柜纵向深度" type="number" v-model="data.cabinets.deep"></mt-field>
         <mt-field label="高度"  placeholder="密集柜高度" type="number" v-model="data.cabinets.height"></mt-field>
         <mt-field label="空隙"  placeholder="密集之间空隙" type="number" v-model="data.cabinets.gap"></mt-field>
         <mt-field label="标记X"  placeholder="标记X" type="number" v-model="data.cabinets.offset.x"></mt-field>
         <mt-field label="标记Y"  placeholder="标记Y" type="number" v-model="data.cabinets.offset.y"></mt-field>
         <div v-for = "(item, i) in data.cabinets.item">
            <h5>第{{i+1}}排  <b v-if="i == data.cabinets.fix">固定列</b><b v-if="item.type == 0">左活动柜</b><b v-if="item.type == 1">右活动柜</b></h5>
           
            <mt-field label="柜体宽度"  placeholder="柜体宽度" type="number" v-model="item.width"></mt-field>
            <div v-if="i != data.cabinets.fix">
                <mt-field label="距离(米)"  placeholder="密集柜最大间隔" type="number" v-model="item.channel"></mt-field>
                <mt-field label="刻度"  placeholder="密集柜间隔刻度" type="number" v-model="item.scale"></mt-field>
            </div>
        </div>

      </ul>
        <mt-button type="primary" @click="save()"> 更新</mt-button>
         <br/>
    <p v-text="get" >12</p>
         <br/> <br/>
         <br/> <br/>
         <br/>
</div>
`,
    data: function () {
        return {
            get:"asd",
            data:value,
            area:this.$route.params.area,
            room:this.$route.params.room,
        }
    },
    created () {
    
        this.$parent.bar_show = true;
        // 组件创建完后获取数据，
        // 此时 data 已经被 observed 了
       this.fetchData()
    },
    watch: {
        // 如果路由有变化，会再次执行该方法
        '$route': 'fetchData'
    },
    methods: {
        save(){
        
            Vue.$indicator.open();
            this.get = this.data;
            axios.put("/geek/"+this.room+"/"+this.area+"/setupTable", this.data)
            .then(function(res){
            
                Vue.$indicator.close();
            }).catch(function (error) {
                alert(error);
                Vue.$indicator.close();
            });
        },
        fetchData () {
            var self = this;
            axios.get("/geek/"+this.room+"/"+this.area+"/setupTable",
            {
            }).then(function(res){
            
                //alert(1);
                self.data = res.data;
                //alert(JSON.stringify(res.data));
            }).catch(function (error) {
                alert(error);
            });
        }
    }

}
